<template>
  <div class="goodsinfo_container">
    <div class="mui-card">
      <div class="mui-card-content">
        <swiper :isFull="false" :lunboList="lunboList"></swiper>
      </div>
    </div>
    <div class="mui-card">
      <div class="mui-card-header">{{ infolist.title }}</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p class="price">
            市场价：<span class="old">￥{{ infolist.market_price }}</span>
            销售价：<span class="now">￥{{ infolist.sell_price }}</span>
          </p>
          <p>
            购买数量：
            <num-box :max="infolist.stock_quantity" @handNum="getCount"></num-box>
          </p>
          <p>
            <mt-button type="primary" size="small">立即购买</mt-button>
            <mt-button type="danger" size="small" 
              @click="addToShopCar"
              :disabled="isDisabled">加入购物车</mt-button>
          </p>
        </div>
      </div>
    </div>
    <div class="mui-card">
      <div class="mui-card-header">商品参数</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p>商品货号：{{ infolist.goods_no }}</p>
          <p>库存情况：{{ infolist.stock_quantity }}</p>
          <p>上架时间：{{ infolist.add_time | dateFormat }}</p>
        </div>
      </div>
      <div class="mui-card-footer">
        <mt-button type="primary" size="large" plain
          @click="$router.push({ name: 'goodsdesc', params: { id } })">图文介绍</mt-button>
        <mt-button type="danger" size="large" plain
          @click="$router.push({ name: 'goodscmt', params: { id } })">商品评论</mt-button>
      </div>
    </div>

    <transition
      @before-enter="ballBeforeEnter"
      @enter="ballEnter"
      @after-enter="ballAfterEnter">
      <div class="ball" v-if="ballFlag" ref="ball"></div>
    </transition>
  </div>
</template>

<script>
import Swiper from '../../../subcomponents/SwiperBox'
import NumBox from '../../../subcomponents/Goodsinfo_numbox'

export default {
  name: 'goodsinfo',
  components: {
    Swiper,
    NumBox
  },
  data() {
    return {
      id: this.$route.params.id,
      infolist: [],
      goods_count: 1,
      ballFlag: false,
      isDisabled: false,
      lunboList: [
        {
          url: 1,
          img: '../../../static/images/2.jpg'
        },
        {
          url: 2,
          img: '../../../static/images/2.jpg'
        },
        {
          url: 3,
          img: '../../../static/images/2.jpg'
        }
      ]
    }
  },
  created() {
    this.$store.dispatch('getGoodsInfo', this.id).then(res => {
      // console.log(res)
      if(res.data.code === 200) {
        this.infolist = res.data.list[0]
      }
    })
  },
  methods: {
    getCount(num) {
      this.goods_count = num
    },
    addToShopCar() {
      this.ballFlag = !this.ballFlag

      this.isDisabled = true
      setTimeout(() => {
        this.isDisabled = false
      },1000)

      const goods = {
        id: this.id,
        price: this.infolist.sell_price,
        count: parseInt(this.goods_count),
        selected: true
      }
      this.$store.commit('addToCar', goods)
    },
    ballBeforeEnter(el) {
      el.style.transform = 'translate(0,0)'
    },
    ballEnter(el, done) {
      el.offsetWidth

      const ball = this.$refs.ball.getBoundingClientRect()
      const badge = document.getElementById('badge').getBoundingClientRect()
      const xDist = badge.left - ball.left
      const yDist = badge.top - ball.top

      el.style.transform = `translate(${xDist}px,${yDist}px)`
      el.style.transition = 'all .5s cubic-bezier(.22,-0.48,.72,1.06)'

      done()
    },
    ballAfterEnter(el) {
      this.ballFlag = !this.ballFlag
    }
  },
}
</script>

<style lang="less" scoped>
  .goodsinfo_container {
    background-color: #eee;
    overflow: hidden;
    .price {
      .old {
        font-size: 13px;
        text-decoration: line-through;
        margin-right: 10px;
      }
      .now {
        font-size: 16px;
        color: red;
        font-weight: bold;
      }
    }
    .mui-card-footer {
      display: block;
      button {
        margin: 15px 0;
      }
    }

    .ball {
      width: 15px;
      height: 15px;
      border-radius: 50%;
      background-color: red;
      position: absolute;
      top: 360px;
      left: 152px;
      z-index: 2;
    }
  }
</style>
